<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>相对定位和绝对定位</title>
		<!-- 定位：将元素正确布局
		 1.浮动定位  左右布局
		 2.相对定位  微调布局   
		 position：relative; 声明元素进行相对定位
		 特点:相对于父级进行定位，不脱离文档流
		 附加属性：方向属性：left、top、right、bottom
		 属性值:正负数值px
		        z轴叠加属性：z-index--属性值：数值，数值越大，越靠前
		 3.绝对定位 :叠加效果  通常与相对定位搭配使用，左栏、侧边栏、遮罩栏
		 左侧---挂靠点
		 position:absolute  声明元素进行绝对定位
		  特点：相对于祖先【页面左上角】
		  如果有父元素，按照父元素【左上顶角】、脱离文档流
		  使用方法：通常与相对定位搭配使用
		 4.固定定位:fiexd 页面区域固定到页面上 
		                 相对、绝对、固定附加属性全部通用
		 5.文档流定位:按照元素分类进行定位:块与块【纵排】
		                                 行与行【横排】
										 块与行【横排】
		 -->
		 <link rel="stylesheet" href="" />
	</head>
	<style>
		/* 加相对定位 */
		div{
			width: 300px;
			height: 300px;
		}
	div.box1{
		background-image: url("img/666.png");
		background-size: 75px 75px;
		/* 相对定位，相对就近父级 */
		width: 75px;
		height: 75px;
		position: relative;
		left: 220px;
		top: 65px;
		/* 叠加属性 */
		z-index:2;
	}
	div.box2{
		background-image: url("img/微信图片_20241122115619-removebg-preview.png");
		background-size: 300px 300px;
		position: relative;
		top:-20px;
		left: 100px;
		z-index: 1;
	}
	</style>
	<body>
		
		<div class="box1"></div>
		<div class="box2"></div>
		
	
	</body>
</html>